import React from 'react';
import type { StockRecord } from '../types/stock';

interface StockListProps {
  records: StockRecord[];
  onUpdate: (id: string, updatedRecord: Partial<StockRecord>) => void;
  onDelete: (id: string) => void;
}

const StockList: React.FC<StockListProps> = ({ records, onUpdate, onDelete }) => {
  const getStatusText = (status: StockRecord['status']) => {
    switch (status) {
      case 'holding': return '持有中';
      case 'sold': return '已卖出';
      case 'target_reached': return '达到目标';
      default: return status;
    }
  };

  const getStatusClass = (status: StockRecord['status']) => {
    switch (status) {
      case 'holding': return 'status-holding';
      case 'sold': return 'status-sold';
      case 'target_reached': return 'status-target';
      default: return '';
    }
  };

  const calculateProfit = (record: StockRecord) => {
    if (record.status === 'sold' || record.status === 'target_reached') {
      return (record.sellTarget - record.buyPrice) * record.shares;
    }
    return 0;
  };

  if (records.length === 0) {
    return (
      <div className="flex-1 flex items-center justify-center">
        <div className="text-center py-12">
          <i className="i-mdi-chart-line-variant text-6xl text-gray-300 mb-4"></i>
          <p className="text-gray-500 text-lg">暂无股票记录</p>
          <p className="text-gray-400 text-sm mt-2">添加您的第一条交易记录开始使用</p>
        </div>
      </div>
    );
  }

  return (
    <div className="stock-list">
      <div className="table-container">
        <table className="w-full">
          <thead>
            <tr className="bg-gray-50">
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">股票名称</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">股数</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">买入价格</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">卖出目标</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">盈亏</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
          {records.map(record => (
            <tr key={record.id} className="hover:bg-gray-50 transition-colors">
              <td className="px-4 py-3 text-sm text-gray-900">{record.date}</td>
              <td className="px-4 py-3 text-sm font-medium text-gray-900">{record.stockName}</td>
              <td className="px-4 py-3 text-sm text-gray-900">{record.shares.toLocaleString()}</td>
              <td className="px-4 py-3 text-sm text-gray-900">¥{record.buyPrice.toFixed(2)}</td>
              <td className="px-4 py-3 text-sm text-gray-900">¥{record.sellTarget.toFixed(2)}</td>
              <td className="px-4 py-3 text-sm">
                <span className={`status ${getStatusClass(record.status)}`}>
                  {getStatusText(record.status)}
                </span>
              </td>
              <td className="px-4 py-3 text-sm">
                {record.status !== 'holding' && (
                  <span className={`font-semibold ${calculateProfit(record) >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                    ¥{calculateProfit(record).toFixed(2)}
                  </span>
                )}
              </td>
              <td className="px-4 py-3 text-sm">
                <div className="flex items-center gap-2">
                  <select
                    value={record.status}
                    onChange={(e) => onUpdate(record.id, { status: e.target.value as StockRecord['status'] })}
                    className="text-xs px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500"
                  >
                    <option value="holding">持有中</option>
                    <option value="sold">已卖出</option>
                    <option value="target_reached">达到目标</option>
                  </select>
                  <button
                    onClick={() => onDelete(record.id)}
                    className="btn-danger text-xs px-2 py-1"
                  >
                    <i className="i-mdi-delete mr-1"></i>
                    删除
                  </button>
                </div>
              </td>
            </tr>
          ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default StockList;